<!DOCTYPE html>

<html class="no-js">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>

    <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
    <!-- 导入拖拽需要的包 -->
    <script src="https://cdn.staticfile.org/Sortable/1.10.0-rc2/Sortable.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css"
    />
    <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
    <link rel="stylesheet" href="../../../lib/index.css" />
    <script src="../../../lib/avue.js"></script>
  </head>

  <body>
    <div id="app">
      {{list}}
      <avue-crud
        :data="list"
        :option="option"
        :is-multi-order="true"
        :header-cell-class-name="headerCellClassName"
        @search-change="searchChange"
        @sort-change="sortChange"
        @sortable-change="sortableChange"
        @on-load="onLoad"
      >
    </div>
  </body>
  <script>
    let sortDefault = {};
    new Vue({
      el: "#app",
      data() {
        return {
            tableLoading:true,
            query:{},
          list: [
            {
              id: 1,
              name: "张三4",
              sex: "男",
              create_time: "1994-02-23 00:00:00"
            },
            {
              id: 2,
              name: "李四",
              sex: "女",
              create_time: "1994-02-23 00:00:00"
            },
            {
              id: 3,
              name: "王五",
              sex: "女",
              create_time: "1994-02-23 00:00:00"
            },
            {
              id: 4,
              name: "赵六",
              sex: "男",
              create_time: "1994-02-23 00:00:00"
            }
          ],
          option: {
            name: "sortable",
            defaultSort: { prop: "name", order: "descending" },
            title: "表格的标题",
            border: true,
            align: "center",
            //sortable: true,
            menuAlign: "center",
            column: [
              {
                label: "姓名",
                prop: "name",
                search:true
              },
              {
                label: "性别",
                prop: "sex"
              },
              {
                label: "日期",
                prop: "create_time",
                type: "text"
              }
            ]
          }
        };
      },
      mounted(){
        //     let arr = [1,2];
        //    let  [,a] = arr;
        //    console.log("a",a)
        //    console.log("b",b)
      },
      methods: {
        /**
         * @title 排序后的回调方法
         * @param {Int} oldindex    对象老序号
         * @param {Int} newindex    对象新序号
         * @param {Object} row      移动的对象数据
         * @param {Array} list      排序后的整个对象
         * @param return
         **/
        sortableChange(oldindex, newindex, row, list) {
          this.list = list;
          console.log(oldindex, newindex, row, list);
        },
        headerCellClassName({column,rowIndex }){
            return "red"
        },
        searchChange(params, done) {
           this.query = params;
            this.onLoad(this.query);
            done();
        },
        sortChange(val, isAutoRequest) {
            sortDefault = val;
          if (isAutoRequest) this.onLoad();
        },
        onLoad(params) {
            let values = {...params,...this.query,...sortDefault};
             console.log("values", values);
        }
      }
    });
  </script>
</html>
